<template>
  <div class="ico-choice">
    <el-popover width="435px" v-model:visible="icoListShow" placement="top-start">
      <template #reference>
        <el-button-group :disabled="disabled" size="default" class="ml-4">
          <el-button :disabled="disabled" v-if="modelValue">
            <app-icon size="22" :name="modelValue"></app-icon>
          </el-button>
          <el-button :disabled="disabled" v-if="!modelValue" @click="icoListShow=true">选择</el-button>
          <el-button :disabled="disabled" v-if="modelValue && clearable" @click="choiceIco('')">清除</el-button>
        </el-button-group>
      </template>
      <el-scrollbar class="icon-body">
          <span class="icon-item" v-for="(name,index) in iconAll" :key="index">
            <app-icon size="18px" class="app-tap" @click="choiceIco(name)" :name="name"></app-icon>
          </span>
      </el-scrollbar>
    </el-popover>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export default defineComponent({
  name: "IcoChoice",
  props: {
    modelValue: String,
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    }
  },
  setup(props, {emit} ) {
    const icoListShow = ref(false)

    const iconAll: string[] = Object.keys(ElementPlusIconsVue)


    /**
     * 选择图标
     * @param name
     */
    function choiceIco(name: string) {
      emit('update:modelValue', name)
      icoListShow.value = false
    }

    return {
      icoListShow,iconAll,choiceIco
    }
  }
})

</script>

<style lang="scss" scoped>
.icon-body {
  width: 410px;
  height: 360px;
  padding: 5px;

  .icon-item {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
  }
}
</style>